<template>
	<div>
		<div class="py_5 px_10 Platform">
			<el-row>
				<el-col :span="4">
					<el-button type="default" round size="mini" @click="downloadOrder()">导出</el-button>
				</el-col>
				<el-col :span="20">
					<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
						<el-form-item class="w_100">
							<el-input v-model="s_name" placeholder="姓名"></el-input>
						</el-form-item>
						<el-form-item class="w_110">
							<el-input v-model="s_tel" placeholder="手机号"></el-input>
						</el-form-item>
						<el-form-item class="w_65">
							<el-select v-model="s_sex_status" placeholder="性别">
								<el-option label="男" value="male"></el-option>
								<el-option label="女" value="female"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item class="w_100">
							<el-select v-model="s_type" placeholder="岗位">
								<el-option v-for="item in TypeArr" :key="item.id" :label="item.label_name" :value="item.id"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-time-select
								class="w_80i"
								v-model="onStreamTimeStart"
								:picker-options="{ start: '00:00', step: '00:30', end: '23:30' }"
								placeholder="开始"
							>
							</el-time-select>
						</el-form-item>

						<el-form-item>
							<el-time-select
								class="w_80i"
								v-model="onStreamTimeEnd"
								:picker-options="{ start: '00:00', step: '00:30', end: '23:30' }"
								placeholder="结束"
							>
							</el-time-select>
						</el-form-item>
						<el-form-item class="w_70">
							<span>已分配时长</span>
						</el-form-item>
						<el-form-item class="w_50">
							<el-select v-model="symbol">
								<el-option label="<" value="1"><</el-option>
								<el-option label=">=" value="2">>=</el-option>
							</el-select>
						</el-form-item>
						<el-form-item class="w_50">
							<el-input v-model="s_num" placeholder=""></el-input>
						</el-form-item>

						<el-button size="mini" type="primary" class="round-right" native-type="button" @click="shearchBtn"
							>搜索</el-button
						>
						<el-button size="mini" round @click="resetBtn">重置</el-button>
					</el-form>
				</el-col>
			</el-row>
		</div>
		<div class="tableMaxBox">
			<template>
				<el-table :data="renList" stripe>
					<el-table-column prop="id" label="序号" width="70">
						<template slot-scope="{ row, $index }">
							<span>{{ $index + 1 }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="姓名">
						<template slot-scope="{ row, $index }">
							<span class="pointer u text-primary" @click="toPersonnelListHx(row)">{{ row.name }}</span>
							<span
								v-if="row.newPeople == 1"
								style="background: #c93a32; color: #fff; padding: 2px 3px; border-radius: 3px;"
								>新</span
							>
						</template>
					</el-table-column>
					<el-table-column prop="work_type" label="人才类型" width="100">
						<template slot-scope="{ row, $index }">
							<span v-if="row.work_type == '1'">兼职({{row.recruitment}})</span>
							<span v-if="row.work_type == '2'">全职({{row.recruitment}})</span>
						</template>
					</el-table-column>
					<el-table-column prop="" label="手机号">
						<template slot-scope="{ row, $index }">
							<span>{{ row.mobile | vf_mobile }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="" label="星级">
						<template slot-scope="{ row, $index }">
							<span class="pointer u text-primary">{{ row.level | vf_xj }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="" label="性别">
						<template slot-scope="{ row, $index }">
							<span class="text-primary" v-if="row.gender == 'other'">未识别</span>
							<span class="text-primary" v-else-if="row.gender == 'male'">男</span>
							<span class="text-success" v-else-if="row.gender == 'female'">女</span>
						</template>
					</el-table-column>
					<el-table-column prop="age" label="年龄"></el-table-column>
					<el-table-column label="健康证" align="center" width="75px">
						<template slot-scope="{ row }">
							<span class="text-success" v-if="row.certificate_health_status == '1'">有</span>
							<span class="text-danger" v-if="row.certificate_health_status == '2'">无</span>
						</template>
					</el-table-column>
					<el-table-column prop="job_types" label="岗位">
						<template slot-scope="{ row, $index }">
							<span :title="row.job_types">{{ row.job_types }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="is_set" label="设置类别">
						<template slot-scope="{ row, $index }">
							<span v-if="row.is_set == 1" class="text-success">日程确认</span>
							<span v-if="row.is_set == 2">接活设置</span>
						</template>
					</el-table-column>
					<!-- <el-table-column prop="task_num" label="任务">
                            <template slot-scope="{row,$index}">
                                <div>
                                    <h4 style="cursor: pointer;">{{row.task_num}}</h4>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="task_hours" label="已分配时长">
                            <template slot-scope="{row,$index}">
                                <div>
                                    <h4 style="cursor: pointer;">{{row.task_hours}}h</h4>
                                </div>
                            </template>
                        </el-table-column> -->
					<el-table-column prop="task_num" label="任务" width="60">
						<template slot-scope="{ row, $index }">
							<el-tooltip effect="dark" placement="top" :open-delay="500" v-if="row.taskinfo.length != 0">
								<div slot="content">
									<div v-for="(item, index) in row.taskinfo" :key="index" style="margin-bottom: 10px;">
										<span class="mr_10 mb_10">{{ item.shop_name }}：</span>
										<span class="mr_10 mb_10">{{ item.start_time }}-{{ item.end_time }}</span>
									</div>
								</div>
								<div>
									<!-- 点击跳转任务列表，携带人的名字过去 -->
									<h4 style="cursor: pointer;" @click="toTasklist(row)">{{ row.task_num }}</h4>
								</div>
							</el-tooltip>
							<div v-if="row.taskinfo.length == 0">
								<!-- 点击跳转任务列表，携带人的名字过去 -->
								<h4 style="cursor: pointer;" @click="toTasklist(row)">{{ row.task_num }}</h4>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="task_hours" label="已分配时长" width="90">
						<template slot-scope="{ row, $index }">
							<el-tooltip effect="dark" placement="top" :open-delay="500" v-if="row.taskinfo.length != 0">
								<div slot="content">
									<div v-for="(item, index) in row.taskinfo" :key="index" style="margin-bottom: 10px;">
										<span class="mr_10 mb_10">{{ item.shop_name }}：</span>
										<span class="mr_10 mb_10">{{ item.start_time }}-{{ item.end_time }}</span>
									</div>
								</div>
								<div>
									<!-- 点击跳转任务列表，携带人的名字过去 -->
									<h4 style="cursor: pointer;" @click="toTasklist(row)">{{ row.task_hours }}h</h4>
								</div>
							</el-tooltip>
							<div v-if="row.taskinfo.length == 0">
								<!-- 点击跳转任务列表，携带人的名字过去 -->
								<h4 style="cursor: pointer;" @click="toTasklist(row)">{{ row.task_hours }}h</h4>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="task_hours" label="可上岗时长">
						<template slot-scope="{ row, $index }">
							<div>
								<h4 style="cursor: pointer;">{{ row.work_hours }}h</h4>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="intersection_time" label="空闲时段">
						<template slot-scope="{ row, $index }">
							<div>
								<div v-if="row.intersection_time.length != 0">
									<h4 style="cursor: pointer;" v-for="(items, indexs) in row.intersection_time" :key="indexs">
										{{ items.start }}-{{ items.end }}
									</h4>
								</div>
								<div v-if="row.intersection_time.length == 0">
									<h4 style="cursor: pointer;">全天休息</h4>
								</div>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页组件 -->
				<page :total="total" :pageNums="pageNum" @pagedata="onChildValue"></page>
			</template>
		</div>
	</div>
</template>

<script>
var common = require('../../../../static/tool.js')
export default {
	data() {
		return {
			ids: '',
			id_sn: '',
			index: '',
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			renList: [], //订单集合

			s_name: '', //姓名
			s_tel: '', //手机号
			staff_sn: [],
			TypeArr: [], //任务类别
			work_date: '',
			area_id: '',
			area_name: '',
			symbol: '2',
			s_num: '',
			s_type: '', //岗位
			s_sex_status: '', //性别
			onStreamTimeStart: '',
			onStreamTimeEnd: '',

			//向分页组件传值
			total: 0,
			pageNum: '',
			pageSizeNow: ''
		}
	},
	props: {
		row_ids: {
			type: String,
			default: ''
		},
		area_ids: {
			type: String
		},
		area_names: {
			type: String
		},
		staff_sns: {
			type: Array
		},
		work_dates: {
			type: String
		}
	},
	watch: {
		row_ids: {
			handler: function (newValue, oldValue) {
				//清空搜索框
				this.resetData()
				// console.log(newValue)
				// console.log(this.work_dates)
				this.staff_sn = this.staff_sns
				this.work_date = this.work_dates
				this.area_id = this.area_ids
				this.area_name = this.area_names
				if (this.staff_sns.length != 0) {
					this.pageNum = 1
					this.listUser()
				}
			},
			deep: true
		}
	},
	created() {
		this.allskill()
	},
	mounted() {},
	methods: {
		listUser() {
			if (this.onStreamTimeStart == null) {
				this.onStreamTimeStart = ''
			}
			if (this.onStreamTimeEnd == null) {
				this.onStreamTimeEnd = ''
			}
			//获取用户列表
			let fn = new FormData()
			fn.append('pageSize', this.pageSizeNow) //每页多少条
			fn.append('page', this.pageNum) //页数
			fn.append('name', this.s_name) //姓名
			fn.append('mobile', this.s_tel) //手机号
			fn.append('work_date', this.work_date)
			fn.append('job_areas', this.area_id)
			// fn.append("area_name", this.area_name);
			fn.append('gender', this.s_sex_status) //性别
			fn.append('staff_sn', this.staff_sn.toString())
			fn.append('job_types', this.s_type)
			// fn.append('time_slot', this.s_time_slot.toString())
			fn.append('start_time', this.onStreamTimeStart)
			fn.append('end_time', this.onStreamTimeEnd)

			if (this.symbol == '1') {
				fn.append('task_hours_lt', this.s_num)
			} else {
				fn.append('task_hours_gte', this.s_num)
			}

			this.$http.post(this.url + '/dispatch/taskStaffList', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						if (res.data.data != null) {
							this.renList = res.data.data.list
							this.total = res.data.data.count
						} else {
							this.renList = []
							this.total = 0
						}
					} else if (res.data.code == '201') {
						this.centerLists = []
						this.total2 = 0
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		allskill() {
			let fn = new FormData()
			fn.append('label_type', 'job_type')
			this.$http.post(this.url + '/label/list', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.TypeArr = res.data.data
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},

		shearchBtn() {
			// 搜索
			this.pageNum = 1
			if (this.staff_sns.length != 0) {
				this.listUser()
			}
		},

		resetBtn() {
			//全部
			this.resetData() //重置请求数据
			if (this.staff_sns.length != 0) {
				this.listUser()
			}
		},

		resetData() {
			//重置请求数据
			this.pageNum = 1
			this.s_name = '' //姓名
			this.s_tel = '' //手机号
			this.symbol = '2'
			this.s_num = ''
			this.s_sex_status = '' //性别
			this.s_type = '' //岗位
			// this.s_time_slot = ['1', '2', '3', '4'] //上岗时段
			this.onStreamTimeStart = ''
			this.onStreamTimeEnd = ''
		},
		//导出
		downloadOrder() {
			if (this.onStreamTimeStart == null) {
				this.onStreamTimeStart = ''
			}
			if (this.onStreamTimeEnd == null) {
				this.onStreamTimeEnd = ''
			}
			let obj = {
				token: JSON.parse(sessionStorage.getItem('manageInfo')).token,
				export: 1,
				name: this.s_name,
				mobile: this.s_tel,
				work_date: this.work_date,
				job_areas: this.area_id,
				staff_sn: this.staff_sn.toString(),
				gender: this.s_sex_status,
				job_types: this.s_type,
				// time_slot: this.s_time_slot.toString(),
				start_time: this.onStreamTimeStart,
				end_time: this.onStreamTimeEnd
			}
			let param = $.param(obj)
			window.location.href = this.url + '/dispatch/taskStaffList?' + param
		},
		//跳转任务列表
		toTasklist(row) {
			// $router.push({path: '/tasklist',query:{name: row.name}})
			const { href } = this.$router.resolve({ path: '/tasklist', query: { name: row.name } })
			window.open(href, '_blank')
		},
		//跳转人才画像
		toPersonnelListHx(row) {
			// console.log(row);
			const { href } = this.$router.resolve({ path: '/personnelListHx', query: { id: row.staff_id } })
			window.open(href, '_blank')
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			if (this.work_date != '') {
				if (this.staff_sns.length != 0) {
					this.listUser()
				}
			}
		}
	},
	filters: {}
}
</script>

<style scoped>
.search_box {
	width: 790px;
}
.auditCentent .labels {
	overflow: auto;
	margin-bottom: 10px;
}
.auditCentent .labels .labels_label {
	float: left;
	cursor: pointer;
	height: 20px;
	line-height: 20px;
}
.check_label {
	background: var(--purple4);
	color: #fff;
	border: none;
	padding: 3px 8px;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}
.search_box .s_submit {
	right: -1px;
	border-top-right-radius: 19px;
	border-bottom-right-radius: 19px;
}
.click_state {
	cursor: pointer;
}
.JobCentent {
	width: 565px;
	float: left;
}
.JobCentent_next {
	width: 290px;
	float: left;
}
.JobCentent_next .labels {
	min-height: 150px;
}
.personnelLists .check_label {
	border: 1px solid var(--purple4);
}
</style>



// WEBPACK FOOTER //
// src/components/abnormal/components/Three.vue